<template>
	<el-card class="mid-side-container">
		<template #header>
			<div class="side-header">
				<img
					style="width: 28px; height: 28px; border-radius: 3px"
					src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/github.46c47564.png"
					alt=""
				/>
				<div class="header-right">
					<el-select style="width: 100px; margin-right: 10px" v-model="hot" class="m-2" placeholder="Select" size="small">
						<el-option v-for="(item, index) in hotList" :key="index" :value="item.value" :label="item.label">{{ item.label }}</el-option>
					</el-select>
					<el-select style="width: 100px; margin-right: 10px" v-model="time" class="m-2" placeholder="Select" size="small">
						<el-option v-for="(item, index) in timeList" :key="index" :value="item.value" :label="item.label">{{ item.label }}</el-option>
					</el-select>
					<el-select style="width: 130px" v-model="lan" class="m-2" placeholder="Select" size="small">
						<el-option v-for="(item, index) in lanList" :key="index" :value="item.value" :label="item.label">{{ item.label }}</el-option>
					</el-select>
				</div>
			</div>
		</template>
		<div class="mid-body">
			<div class="body-item" v-for="(item,index) in bodyList" :key="index">
				<div class="item-header">
					<a>{{item.name}}</a>
				</div>
				<div class="item-comment">
					<span>{{item.comment}}</span>
				</div>
				<div class="item-footer">
					<div class="foot-item">
						<svg
							t="1645091696681"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="6629"
							width="12"
							height="12"
						>
							<path
								d="M752 100c-61.8 0-112 50.2-112 112 0 47.7 29.9 88.5 72 104.6v27.6L512 601.4 312 344.2v-27.6c42.1-16.1 72-56.9 72-104.6 0-61.8-50.2-112-112-112s-112 50.2-112 112c0 50.6 33.8 93.5 80 107.3v34.4c0 9.7 3.3 19.3 9.3 27L476 672.3v33.6c-44.2 15-76 56.9-76 106.1 0 61.8 50.2 112 112 112s112-50.2 112-112c0-49.2-31.8-91-76-106.1v-33.6l226.7-291.6c6-7.7 9.3-17.3 9.3-27v-34.4c46.2-13.8 80-56.7 80-107.3 0-61.8-50.2-112-112-112zM224 212c0-26.5 21.5-48 48-48s48 21.5 48 48-21.5 48-48 48-48-21.5-48-48z m336 600c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48z m192-552c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z"
								p-id="6630"
								fill="#707070"
							></path>
						</svg>
						<span style="font-size: 12px">{{item.fork}}</span>
					</div>
					<div class="foot-item">
						<svg
							t="1645091625890"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="5598"
							width="12"
							height="12"
						>
							<path
								d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z"
								p-id="5599"
								fill="#707070"
							></path>
						</svg>
						<span style="font-size: 12px">{{item.collect}}</span>
					</div>
					<div class="foot-item">
						<svg
							t="1645091823717"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="7972"
							width="12"
							height="12"
						>
							<path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#EACA44" p-id="7973"></path>
							<path
								d="M512 64C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64z m0 832C299.936 896 128 724.064 128 512S299.936 128 512 128s384 171.936 384 384-171.936 384-384 384z"
								fill=""
								p-id="7974"
							></path>
							<path
								d="M609.184 498.4A126.848 126.848 0 0 0 640 416a127.68 127.68 0 0 0-96-123.456V224h-32v64h-32V224h-32v64h-96v32c32 0 32 32 32 32v320s0 32-32 32v32h96v64h32v-64h32v64h32v-64a128 128 0 0 0 128-128 127.424 127.424 0 0 0-62.816-109.6zM512 352a64 64 0 0 1 0 128h-64v-128h64z m32 320h-96v-128h96a64 64 0 0 1 0 128z"
								fill=""
								p-id="7975"
							></path>
						</svg>
						<span>{{item.lan}}</span>
					</div>
				</div>
			</div>
		</div>
	</el-card>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';

export default defineComponent({
	setup() {
		const state = reactive({
			hot: 1,
			time: 1,
			lan: 1,
			hotList: [
				{
					label: '热门',
					value: 1,
				},
				{
					label: '新生',
					value: 2,
				},
			],
			timeList: [
				{
					label: '今日',
					value: 1,
				},
				{
					label: '本周',
					value: 2,
				},
				{
					label: '本月',
					value: 3,
				},
			],
			lanList: [
				{
					label: 'JavaScript',
					value: 1,
				},
				{
					label: 'Java',
					value: 2,
				},
			],
      bodyList: [
        {
          name: 'mermaid-js/mermaid',
          comment: 'Generation of diagram and flowchart from text in a similar manner as markdown',
          lan: 'JavaScript',
          fork: '4W+',
          collect: '3K+'
        },
        {
          name: 'mermaid-js/mermaid',
          comment: 'Generation of diagram and flowchart from text in a similar manner as markdown',
          lan: 'JavaScript',
          fork: '4W+',
          collect: '3K+'
        },
        {
          name: 'mermaid-js/mermaid',
          comment: 'Generation of diagram and flowchart from text in a similar manner as markdown',
          lan: 'JavaScript',
          fork: '4W+',
          collect: '3K+'
        },
        {
          name: 'mermaid-js/mermaid',
          comment: 'Generation of diagram and flowchart from text in a similar manner as markdown',
          lan: 'JavaScript',
          fork: '4W+',
          collect: '3K+'
        },
        {
          name: 'mermaid-js/mermaid',
          comment: 'Generation of diagram and flowchart from text in a similar manner as markdown',
          lan: 'JavaScript',
          fork: '4W+',
          collect: '3K+'
        },
        {
          name: 'mermaid-js/mermaid',
          comment: 'Generation of diagram and flowchart from text in a similar manner as markdown',
          lan: 'JavaScript',
          fork: '4W+',
          collect: '3K+'
        },
        {
          name: 'mermaid-js/mermaid',
          comment: 'Generation of diagram and flowchart from text in a similar manner as markdown',
          lan: 'JavaScript',
          fork: '4W+',
          collect: '3K+'
        },
        {
          name: 'mermaid-js/mermaid',
          comment: 'Generation of diagram and flowchart from text in a similar manner as markdown',
          lan: 'JavaScript',
          fork: '4W+',
          collect: '3K+'
        },
        {
          name: 'mermaid-js/mermaid',
          comment: 'Generation of diagram and flowchart from text in a similar manner as markdown',
          lan: 'JavaScript',
          fork: '4W+',
          collect: '3K+'
        }

      ]
		});
		return {
			...toRefs(state),
		};
	},
});
</script>

<style lang="scss" scoped>
.mid-side-container {
	width: 100%;
	height: 100%;
	background: #fff;
	.side-header {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.mid-body {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 10px;
		height: auto;
		box-sizing: border-box;
		padding: 10px;

		.body-item {
			width: 100%;
			height: 120px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 10px;
			background: #f9fafa;
      margin-bottom: 10px;
      transition: .15s all;
			.item-header {
				color: #1e80ff;
				font-size: 16px;
				font-weight: bolder;
			}
			.item-comment {
				color: #4e5969;
				font-size: 13px;
			}
			.item-footer {
				display: flex;
				flex-direction: row;

				.foot-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-right: 10px;
				}
			}
		}
    .body-item:hover{
      background: #e8f3ff;
    }
	}
}
</style>
